<template>
  <view class="container">
    <!-- 顶部组件 -->
    <u-navbar
      id="nav-bar"
      :is-back="true"
      :background="{ background: '#fff' }"
      :border-bottom="false"
      title=" "
    >
      <view class="segmentedBox">
        <u-subsection
          :list="subsectionList"
          :current="subsectionIndex"
          bgColor="#F5F5F5"
          @change="subsectionChange"
        >
        </u-subsection>
      </view>
    </u-navbar>
    <view class="content">
      <view class="header">
        <image
          class="header-bg"
          src="/static/images/icon-hbjlBg.png"
          mode="widthFix"
        ></image>

        <view class="header-content">
          <view class="item">
            <view class="value">7244</view>
            <view class="label">划拨次数(次)</view>
          </view>
          <view class="item">
            <view class="value">1237</view>
            <view class="label">划拨台数(台)</view>
          </view>
        </view>
      </view>

      <view @click="showPicker = true" class="sort">
        <text>2024年1月</text>
        <u-icon name="arrow-down" color="#333333" size="28"></u-icon>
      </view>

      <!-- 列表 -->
      <!-- <mescroll-body
          ref="mescrollRef"
          @init="mescrollInit"
          top="0"
          @down="downCallback"
          :up="upOption"
          @up="upCallback"
        > -->

      <view class="list">
        <view class="item">
          <view class="row">
            <view class="title"> 汇数满天星 </view>
            <view class="num">30台</view>
          </view>
          <view class="row">
            <view class="No">批次号:546496456165</view>
            <view class="date">2024-01-02</view>
          </view>
        </view>
      </view>
      <!-- </mescroll-body> -->
    </view>
    <u-picker
      v-model="showPicker"
      mode="time"
      :params="params"
      @confirm="pickerConfirm"
    ></u-picker>
  </view>
</template>
<script>
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
export default {
  mixins: [MescrollMixin],
  data() {
    return {
      subsectionList: [
        {
          name: '划出',
        },
        {
          name: '划进',
        },
      ],
      subsectionIndex: 0,
      params: {
        year: true,
        month: true,
        day: true,
        hour: false,
        minute: false,
        second: false,
      },
      showPicker: false,
      upOption: {
        page: {
          num: 0,
          size: 10,
        },
        noMoreSize: 5,
        empty: {
          icon: '/static/images/icon-empty.png',
          tip: '',
        },
      },
      mescroll: null,
    };
  },
  onLoad() {},
  methods: {
    navigateTo(url) {
      uni.navigateTo({
        url: url,
      });
    },
    subsectionChange(index) {
      this.subsectionIndex = index;
    },
    pickerConfirm(value) {},
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  min-height: 100vh;
  padding: 30rpx;
  text-align: center;
  background-color: #f5f5f5;
  .segmentedBox {
    position: absolute;
    top: 10rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 300rpx;
    z-index: 99;
  }
}

.content {
  position: relative;
  width: 100%;
  .header {
    position: relative;
    width: 100%;
    .header-bg {
      width: 100%;
      height: auto;
    }
    .header-content {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;
      .item {
        flex: 1;
        min-width: 0;
        text-align: center;
        line-height: 1;
        .value {
          font-family: DIN, sans-serif;
          font-weight: bold;
          font-size: 48rpx;
          color: #ffeacc;
        }
        .label {
          margin-top: 20rpx;
          font-weight: 400;
          font-size: 24rpx;
          color: rgba($color: #ffffff, $alpha: 0.5);
        }
      }
    }
  }
  .sort {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 30rpx 0;
    width: 100%;
    font-weight: 400;
    font-size: 28rpx;
    color: #333333;
    text {
      margin-right: 10rpx;
    }
  }
  .list {
    width: 100%;
    padding: 0;
    .item {
      position: relative;
      width: 100%;
      height: auto;
      padding: 30rpx;
      background: #ffffff;
      border-radius: 16rpx;
      .row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
      }
      .title {
        font-weight: 800;
        font-size: 28rpx;
        color: #333333;
      }
      .num {
        font-weight: 800;
        font-size: 28rpx;
        color: #b7926e;
      }
      .No {
        margin-top: 20rpx;
        font-weight: 400;
        font-size: 24rpx;
        color: #999999;
      }
      .date {
        margin-top: 20rpx;
        font-weight: 400;
        font-size: 24rpx;
        color: #999999;
      }
    }
  }
}
</style>
